<template>
  <view class="flag-tags">
    <text 
      v-for="flag in flagArray" 
      :key="flag" 
      class="flag-tag"
    >
      {{ flag }}
    </text>
  </view>
</template>

<script>
export default {
  name: 'FlagTags',
  props: {
    flags: {
      type: String,
      default: ''
    },
    showEmpty: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    flagArray() {
      if (!this.flags) return this.showEmpty ? [''] : [];
      return this.flags.split(',').filter(flag => flag.trim() !== '');
    }
  }
}
</script>

<style lang="scss" scoped>
.flag-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  
  .flag-tag {
    color: #fff;
    font-size: 10px;
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.2;
    margin: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    font-weight: 500;
    background-color: #2196f3;
  }
}
</style> 